<!DOCTYPE html>
<html  xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head th:include="common/head :: htmlhead">
<body>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">网点评价</div>
                <div class="layui-card-body" >
                    <div class="layui-form" >
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">网点名称</label>
                                <div class="layui-input-inline">
                                    <select name="wangdian" lay-verify="required" id="wangdian">
                                        <option value="">请选择标签</option>
                                        <option value="北京市丰台区科学城">北京市丰台区科学城</option>
                                    </select>
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">请选择月份范围</label>
                                <div class="layui-input-block">
                                    <input type="text" name="yuefen" lay-verify="required" placeholder=""
                                           autocomplete="off" class="layui-input" id="yufen">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <button class="layui-btn layuiadmin-btn-list" lay-submit lay-filter="LAY-app-contlist-search">
                                    <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-col-md12">
        <div class="layui-card">
            <div class="layui-card-header">生产率变化范围</div>
            <div class="layui-card-body">
                <div id="mychart" style="height: 400px;"></div>
            </div>
        </div>
    </div>
</div>
<script  type="text/javascript">
    // layui.config({
    //     base: '/static/lib/' //静态资源所在路径
    // }).extend({
    //     index: 'index' //主入口模块
    // }).use(['index', 'form','layarea'], function(){
    //
    // // })
    // layui.use(['form','laydate'], function(){
    //     var laydate = layui.laydate;
    //     var form = layui.form;
    //     //执行一个laydate实例
    //     laydate.render({
    //         elem: '#yufen' //指定元素
    //         ,type: 'month'
    //     });
    //     // $('.layui-btn').on('click', function(){
    //     //     console.log("1");
    //     // });
    //     form.on('submit(LAY-app-contlist-search)', function(data){
    //         $.ajax({
    //             url:'/evaluate',
    //             type:'post',
    //             data:data.field,
    //             success:function(data){
    //
    //             }})
    //     })
    // });
    layui.config({
        base: '/static/lib/' //静态资源所在路径
    }).extend({
        index: 'index' //主入口模块
    }).use(['form','laydate','echarts'],
        function() {
            var laydate = layui.laydate;
            var form = layui.form;
            //执行一个laydate实例
            laydate.render({
                elem: '#yufen' //指定元素
                ,type: 'month'
                ,range: true
            });
            var echarts = layui.echarts,
                option = {
                    xAxis: {
                        type: 'category',
                        data: []
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        data: [],
                        type: 'line',
                        symbol: 'triangle',
                        symbolSize: 20,
                        lineStyle: {
                            color: 'green',
                            width: 4,
                            type: 'dashed'
                        },
                        itemStyle: {
                            borderWidth: 3,
                            borderColor: 'yellow',
                            color: 'blue'
                        }
                    }]
                };
            // option = {
            //     xAxis: {
            //         type: 'category',
            //         data: [1,2,3]
            //     },
            //     yAxis: {
            //         type: 'value'
            //     },
            //     series: [{
            //         data: [1,2,3],
            //         type: 'bar',
            //         barMaxWidth: '100'
            //     }]
            // };
            mychart= echarts.init(document.getElementById('mychart'));
            mychart.setOption(option);

            form.on('submit(LAY-app-contlist-search)', function(data){
                $.ajax({
                    url:'/get_evaluate?type=shengchanlv',
                    async: false,
                    type:"POST",
                    dataType: "text",
                    data:data.field,
                    success:function(data){
                        data=$.parseJSON(data);
                        console.log(data);
                        console.log(data.res);
                        if(data.res.toString()!=='fail'){
                            var value_list = [];
                            mychart.setOption({
                                title: {
                                    text: '生产率趋势图'
                                },
                                tooltip: {},
                                xAxis: {
                                    type: 'category',
                                    data: data.yuefen
                                },
                                yAxis: {
                                    type: 'value'
                                },
                                series: [{
                                    data: data.shengchanlv,
                                    type: 'line',
                                    symbol: 'triangle',
                                    symbolSize: 20,
                                    lineStyle: {
                                        color: 'green',
                                        width: 4,
                                        type: 'dashed'
                                    },
                                    itemStyle: {
                                        borderWidth: 3,
                                        borderColor: 'yellow',
                                        color: 'blue'
                                    }
                                }]
                            });
                        }else{
                            layer.open({
                                title: '查询失败'
                                ,content: '未查询到相关记录！'
                            });
                        }
                    }})
            })
        }
    );
</script>
</body>
</html>